import React, {useState, useEffect} from 'react'

import { NavLink } from 'react-router-dom'
import { Layout, Menu, message } from 'antd';

import './style/common.less'
import './index.css'
import Axios from './commons/axios'

const { Header } = Layout;

/**
 * 主页面设计：基于栅格系统进行页面分层
 */
function renderMenuTree(data) {
    return data.map(item => {
        return <Menu.Item key={item.url}>
                    <NavLink to={item.url}>
                        {item.title}
                    </NavLink>
                </Menu.Item>
    })
}

const Admin = props => {

    const [menu, setMenu] = useState([])
   
    useEffect(() =>{
        const res = getMenus()
        setMenu(res)
    }, [])

    function getMenus() {
        let url = "/auth/menus"
        Axios.ajax({
            url: url,
            data: {
                isShowLoading: true
            },
            method: 'get'
        }).then(res => {
            if (res.code === 0) {
                const menu = renderMenuTree(res.data)
                setMenu(menu)
            }
        })
    }

    return (
        <Layout>
            <Header className="header">
                <div className="logo" />
                <Menu theme="dark" mode="horizontal">
                    { menu }
                </Menu>
            </Header>
            <Layout className="content">
                { props.children }
            </Layout>
        </Layout>
    )
}

export default Admin